<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=Czffj1wkZYUdhieQvU8CCxmy2YDEddbq"></script>
    <title>GPS转百度</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>


</head>
<body>
<div id="allmap"></div>
</body>
<script>
    const app = new Vue({
        el:'',
        data:{
            coordinate:[],
            x:"",
            y:""
        },
        methods:{

            findMap(string){
                axios.get("/findBaiDuMap/id="+string).then(resp=>{
                    this.coordinate=resp.data;
                    this.x=this.coordinate[0];
                    this.y = this.coordinate[1];
                    this.getMap();
                })
            },

            getMap() {
                // 百度地图API功能
                //GPS坐标

                let ggPoint = new BMapGL.Point(this.x,this.y);

                //地图初始化
                let bm = new BMapGL.Map("allmap");
                bm.centerAndZoom(ggPoint, 15);
                bm.addControl(new BMapGL.ZoomControl());

                // //添加gps marker和label
                // let markergg = new BMapGL.Marker(ggPoint);
                // bm.addOverlay(markergg); //添加GPS marker
                // let labelgg = new BMapGL.Label("未转换的GPS坐标（错误）",{offset:new BMapGL.Size(10, -10)});
                // markergg.setLabel(labelgg); //添加GPS label

                // //坐标转换完之后的回调函数
                translateCallback = function (data){
                    if(data.status === 0) {
                        let marker = new BMapGL.Marker(data.points[0]);
                        bm.addOverlay(marker);
                        let label = new BMapGL.Label("用户位置",{offset:new BMapGL.Size(10, -10)});
                        marker.setLabel(label); //添加百度label
                        bm.setCenter(data.points[0]);
                    }
                };

                setTimeout(function(){
                    let convertor = new BMapGL.Convertor();
                    let pointArr = [];
                    pointArr.push(ggPoint);
                    convertor.translate(pointArr, COORDINATES_WGS84, COORDINATES_BD09, translateCallback)
                }, 1000);


                /**
                 * 坐标常量说明：
                 * COORDINATES_WGS84 = 1, WGS84坐标
                 * COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
                 * COORDINATES_GCJ02 = 3，GCJ02坐标
                 * COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐标
                 * COORDINATES_BD09 = 5, 百度bd09经纬度坐标
                 * COORDINATES_BD09_MC = 6，百度bd09墨卡托坐标
                 * COORDINATES_MAPBAR = 7，mapbar地图坐标
                 * COORDINATES_51 = 8，51地图坐标
                 */
            }
        },
        created(){
            let string = location.search.split("=")[1];
            this.findMap(string);
        }
    });

</script>
</html>

